<template lang="pug">
  .share-dialog(v-show="isShow")
    el-dialog(
      title="分享",
      :visible.sync="isShow",
      width="800px",
      :before-close="handleClose")
      .qrcode.pos-r(name="slot")
        .bdsharebuttonbox.bdshare-button-style0-16
          a.bds_more(href='javascript:;', data-cmd='more')
          a.bds_sqq(href='javascript:;', data-cmd='sqq', title='分享给QQ好友')
          a.bds_qzone(href='javascript:;', data-cmd='qzone', title='分享到QQ空间')
          a.bds_tsina(href='javascript:;', data-cmd='tsina', title='分享到新浪微博')
        h3.tac 
          a(@click="handleJump(true)" :class="isPano?'hh':''") 分享作品
          a(@click="handleJump(false)" :class="!isPano?'hh':''") 分享当前场景
            img(:src="baseUrl + '/api_qrcode.aspx?id=' + panoId + '&newpano=1'" v-show="isPano")
            img(:src="baseUrl + '/api_qrcode.aspx?id=' + panoId + '&newpano=1&scene_id='+ this.$route.query.scene_id " v-show="!isPano")
      .input-group.tac
        span 作品地址
        el-input.item(:value="panoUrl")
      .input-group.tac
        span 嵌入到网站
        el-input.item(:value="iframeCode")
      .input-group.tac
        el-tooltip(effect="dark", content="如嵌入后显示异常，请在html页面的head里加入以下代码", placement="bottom-start")
          span 异常处理
            i.iconfont.icon-redian
        .item
          //- strong.red 如嵌入后显示异常，请在html页面的head里加入以下代码：
          el-input(:value="mateCode")
</template>

<script>
let bBtn = true
export default {
  data() {
    return {
      panoId: null,
      baseUrl: $globalconfig.URLS.API,
      viewUrl: $globalconfig.URLS.PANO_VIEW_PREFIX,
      isShow: false,
      title: '',
      content: null,
      panoUrl: null,
      isPano: true
    }
  },
  created() {
    this.panoId = this.$route.params.panoId
    this.panoUrl = `${this.viewUrl}${this.panoId}`
    this.iframeCode = `<iframe src="${this.panoUrl}" frameborder ="no" border="0" style="width: 100%; height: 600px;"></iframe>`
    this.mateCode = '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">'
  },
  mounted() {
    this.$vgo.on('model:share', () => {
      this.show()
      if(bBtn) {
        this.baiduShare()
        bBtn = false
      }
    })
  },
  methods: {
    show() {
      this.isShow = true
    },
    hide() {
      this.isShow = false
    },
    handleClose(done) {
      done()
    },
    baiduShare() {
      window._bd_share_config = {
        "common": {
          "bdSnsKey": {},
          "bdText": "",
          "bdMini": "2",
          "bdPic": "",
          "bdStyle": "0",
          "bdSize": "16"
        },
        "share": {}
      };

      let nonceStr = +~(-new Date() / 36e5)
      let script = document.createElement('script')
      script.src = '//bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + nonceStr
      document.getElementsByTagName('head')[0].appendChild(script)
    },
    handleJump(ispano) {
      this.isPano = ispano
       if(ispano || !this.$route.query.scene_id) {
          this.panoUrl = `${this.viewUrl}${this.panoId}`
       } else {
          this.panoUrl = `${this.viewUrl}${this.panoId}?scene_id=${this.$route.query.scene_id}`
       }
       this.iframeCode = `<iframe src="${this.panoUrl}" frameborder ="no" border="0" style="width: 100%; height: 600px;"></iframe>`
    }
  }
}
</script>

<style lang="stylus">
@import '../../../assets/styles/color.styl'
.share-dialog
  .qrcode
    padding-bottom: 40px
    h3
      font-size: 16px
    a
      font-size: 16px
      padding-left: 20px
      cursor: pointer
    .hh
      color: $primary
    img
      margin: 20px auto 0 auto
      max-width: 200px
    .bdsharebuttonbox, .bdshare-button-style0-16
      padding: 10px 0;
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
  .input-group
    margin-top: 10px
    span
      display: inline-block
      width: 100px
      padding: 0 10px
      font-size: 16px
      font-weight: 700
      color: $black-light
      cursor: default
      i
        color: $danger
    .item
      display: inline-block
      margin-left: 10px
      width: 500px
      input
        color: $black-light
      p
        font-weight: 700

</style>
